<template>
  <el-dialog v-model="isModalVisible" width="80%" :append-to-body="true" @close="closeModal">
    <div class="info" v-loading="loading">
      <div>
        <div class="right-color">成交信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="成交商户：" prop="name">{{ infos?.companyName }}</el-form-item>
          <el-form-item label="品类：" prop="zone">{{ infos?.categoryTypeName }}</el-form-item>
          <el-form-item label="成交商品：" prop="time">{{ infos?.productTypeName }}</el-form-item>
          <el-form-item label="成交金额(元)：" prop="name">{{ infos?.amount }}</el-form-item>
          <el-form-item label="成交时间：" prop="time">{{ infos?.transactionTime }}</el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div>
        <div class="right-color">基本信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="业主姓名：" prop="name">{{ infos?.ownName }}</el-form-item>
          <el-form-item label="联系电话：" prop="zone">{{ infos?.mobile }}</el-form-item>
          <el-form-item label="房屋户型：" prop="name">{{ infos?.houseType }}</el-form-item>
          <el-form-item label="房屋面积：" prop="zone">{{ infos?.size }}㎡</el-form-item>
          <el-form-item label="房屋地址：" prop="zone">{{ infos?.houseAddress }}</el-form-item>
        </el-form>
      </div>
      <el-divider />
      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane label="商机信息">
          <div class="bom">
            <BasePageTable class="h-full" :tableColumnsData="merchantColumns" :tableData="infos?.opportunityList">
            </BasePageTable>
            <!--            <el-row :gutter="20">-->
            <!--              <el-col :span="7">-->
            <!--                <BasePageTable class="h-full" :tableColumnsData="merchantColumns" :tableData="infos?.opportunityList"-->
            <!--                  @cell-click="changTable">-->
            <!--                </BasePageTable>-->
            <!--              </el-col>-->
            <!--              <el-col :span="17">-->
            <!--                <div>-->
            <!--                  <div class="right-color">{{ tabInfo?.categoryTypeName }} - 需求信息</div>-->
            <!--                  <el-form label-width="auto" inline>-->
            <!--                    <el-form-item label="品类商品：" prop="name">{{ tabInfo?.productTypeName }}</el-form-item>-->
            <!--                    <el-form-item label="空间：" prop="name">{{ tabInfo?.spaceName }}</el-form-item>-->
            <!--                    <el-form-item label="采买时间：" prop="time">{{ tabInfo?.purchaseTypeName }}</el-form-item>-->
            <!--                    <el-form-item label="预算：" prop="time">{{ tabInfo?.budget }}</el-form-item>-->
            <!--                    <el-form-item label="发布时间：" prop="time">{{ tabInfo?.createTime }}</el-form-item>-->
            <!--                    <el-form-item label="业主备注：" prop="name">{{ tabInfo?.remark }}</el-form-item>-->
            <!--                  </el-form>-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                  <div class="right-color">修改历史</div>-->
            <!--                  <BasePageTable class="h-full" :tableColumnsData="updateColumns" :pageSize="merchantParams.pageSize"-->
            <!--                                 :tableData="merchantPageData" :total="merchantParams.total" :loading="loading"-->
            <!--                                 style="min-height: 200rpx;" @handleQuery="updateChangePage">-->
            <!--                  </BasePageTable>-->
            <!--                </div>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
          </div>
        </el-tab-pane>
        <el-tab-pane label="成交动态">
          <div class="bom">
            <BasePageTable class="h-full" :tableColumnsData="leftColumns" :pageSize="leftParams.pageSize"
              :tableData="leftPageData" :total="leftParams.total" :loading="loading" @handleQuery="leftChangePage">
            </BasePageTable>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div>
        <el-button type="primary" style="width: 150px;" @click="clickBut('next')">下一单</el-button>
        <el-button type="primary" style="width: 150px;" @click="clickBut('previous')">上一单</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import transactionApi from '@/api/mall/transaction'

const isModalVisible = ref(false)
const infos = ref()
const loading = ref(false)
const tabInfo = ref()
const emit = defineEmits(["nextBut"]);
const leftColumns = ([
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    label: "成交品类",
    prop: "categoryTypeName",
    align: "center",
  },
  {
    label: "成交金额(元)",
    prop: "amount",
    align: "center",
  },
  {
    label: "成交商户",
    prop: "merUserName",
    align: "center",
  },
  {
    label: "合伙人名称",
    prop: "mallName",
    align: "center",
  },
  {
    label: "发送时间",
    prop: "transactionTime",
    align: "center",
  },
])

const leftParams = ref({
  pageSize: 10,
  pageNum: 1,
  total: 1,
  conUserId: undefined,
  merUserId: undefined,
})
const leftPageData = ref([])

const merchantColumns = ([
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    label: "品类",
    prop: "categoryTypeName",
    align: "center",
  },
  {
    label: "空间",
    prop: "spaceName",
    align: "center",
  },
  {
    label: "预算（元）",
    prop: "budget",
    align: "center",
  },
  {
    label: "成交总金额（元）",
    prop: "totalAmount",
    align: "center",
  },
  {
    label: "备注",
    prop: "remark",
    align: "center",
  },
  {
    label: "发布时间",
    prop: "createTime",
    align: "center",
  },
  {
    label: "最近成交时间",
    prop: "latestTransactionTime",
    align: "center",
  },
  // {
  //   label: "最近修改时间",
  //   prop: "modifyTime",
  //   align: "center",
  // },
])
const updataColumns = ref([
  {
    type: "index",
    label: "序号",
    width: 60,
    align: "center",
  },
  {
    label: "修改内容",
    prop: "content",
    align: "center",
  },
  {
    label: "修改时间",
    prop: "operateTime",
    align: "center",
  },
])
const merchantParams = ref({
  pageSize: 10,
  total: 1,
  pageNum: 1,
  userId: undefined,
  requirementId: undefined,
})
const merchantPageData = ref()

function openModal(row: any) {
  isModalVisible.value = true;
  getInfos(row.id)
}

async function getInfos(id: number) {
  try {
    loading.value = true
    const res = await transactionApi.getDetail(id)
    infos.value = res.data
    infos.value.opportunityList.forEach((item: any) => {
      item.totalAmount = item.totalAmount ? item.totalAmount : '0';
      item.remark = item.remark ? item.remark : '/';
    })
    tabInfo.value = infos.value.opportunityList[0]
    console.log("需求ID:{}", tabInfo.value.id)
    // getDynamic(tabInfo.value.userId,tabInfo.value.id)
    getHistory(res.data)
    loading.value = false
  } catch (err) {
    loading.value = false
  }
}

function leftChangePage(val: any) {
  leftParams.value.pageSize = val.pageSize
  leftParams.value.pageNum = val.pageNum
  getHistory(infos.value)

}

function updateChangePage(val: any) {
  merchantParams.value.pageNum = val.pageNum;
  merchantParams.value.pageSize = val.pageSize;
  getDynamic(tabInfo.value.userId, tabInfo.value.id);
}

async function getDynamic(id: any, requirementId: any) {
  merchantParams.value.userId = id
  merchantParams.value.requirementId = requirementId
  try {
    loading.value = true
    const res: any = await transactionApi.getConDynamic(merchantParams.value)
    merchantPageData.value = res.data
    merchantParams.value.total = res.total
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

async function getHistory(row: any) {
  const data = {
    pageSize: leftParams.value.pageSize,
    pageNum: leftParams.value.pageNum,
    conUserId: row.conUserId,
    // merUserId: row.merUserId,
  }
  try {
    loading.value = true
    const res: any = await transactionApi.getHistory(data)
    // 校验如果 amount为空用 / 显示
    leftPageData.value = res.data
    leftPageData.value.forEach((item: any) => {
      item.amount = item.amount ? item.amount : '****'
    })
    leftParams.value.total = res.total
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

function clickBut(val: any) {
  emit('nextBut', val)
}

function changTable(val: any) {
  tabInfo.value = val
  getDynamic(tabInfo.value.userId, tabInfo.value.id)
}

function closeModal() { }
defineExpose({
  openModal,
});
</script>


<style lang="scss" scoped>
.info {
  height: calc(100vh - 300px);
  min-height: 600px;
  overflow-y: scroll;

  .bom {
    height: calc(100vh - 750px);
    min-height: 200px;
    overflow-y: scroll;
  }

  .right-color {
    border-left: 4px solid #4095FE;
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
